<template>
  <div class="app-wrap">
    <el-container>
      <el-header>
        <div class="logo">
          <img src="~src/assets/icon48.png" alt="" />
          <h3>AKSU</h3>
        </div>
            <header-user></header-user>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
          >
          <el-menu-item index="/index" @click="linkTo('/index')">
              <span>首页</span>
            </el-menu-item>
            
             <el-menu-item index="/ever-note" @click="linkTo('/ever-note')">
              <span>笔记管理</span>
            </el-menu-item>
            <el-menu-item   v-for="(route,index) in accessRoutes" :index="route.path" :key="index" @click="linkTo(route.path)">
              <span>{{ route.meta.title }}</span>
            </el-menu-item>
            <el-menu-item index="/personal-center" @click="linkTo('/personal-center')">
              <span>个人中心</span>
            </el-menu-item>
            
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import headerUser from "src/options/components/header-user/header-user.vue"
export default {
  name: "App",
  components:{headerUser},
  data() {
    return {
      defaultActive: "/",
    };
  },
  computed:{
    accessRoutes(){
     return  this.$store.state.permission.accessRoutes
    }       
  },
  methods: {
    linkTo(path) {
      this.$router.push({
        path,
      });
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.defaultActive = route.path;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  margin-left: 20px;
  cursor: pointer;
  img {
    margin-right: 8px;
  }
  h3{
    font-size: 16px;
  }
}

.el-menu {
  height: calc(100vh - 80px);
}
.main {
  padding: 15px;
}
</style>
